import { Card, Col, Row, Statistic } from "antd"
import {ArrowDownOutlined, ArrowUpOutlined} from "@ant-design/icons"

const HeadStat =()=>{
    return (
        <Row style={{width:'100%'}} gutter={8}>
            <Col span={6}>
                <Card variant="borderless">
                    <Statistic
                    title="Active"
                    value={11.28}
                    precision={2}
                    valueStyle={{ color: '#3f8600' }}
                    prefix={<ArrowUpOutlined />}
                    suffix="%"
                    />
                </Card>
            </Col>
            <Col span={6}>
                <Card variant="borderless">
                    <Statistic
                    title="Idle"
                    value={9.3}
                    precision={2}
                    valueStyle={{ color: '#cf1322' }}
                    prefix={<ArrowDownOutlined />}
                    suffix="%"
                    />
                </Card>
            </Col>
            <Col span={6}>
                <Card variant="borderless">
                    <Statistic
                    title="Total"
                    value={'112,887,506'}
                    precision={2}
                    valueStyle={{ color: '#3f8600' }}
                    prefix={<ArrowUpOutlined />}
                    suffix="￥"
                    />
                </Card>
            </Col>
            <Col span={6}>
                <Card variant="borderless">
                    <Statistic
                    title="Increment"
                    value={5.3}
                    precision={2}
                    valueStyle={{ color: '#cf1322' }}
                    prefix={<ArrowUpOutlined />}
                    suffix="%"
                    />
                </Card>
            </Col>
        </Row>
    )
}
export default HeadStat